<template>
    <div class="faultHandlingMode zy-content ">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('公司代码')}}</p>
              <div class="ipt">
                <Input type="text" v-model="paramsList.code" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.company')}}</p>
              <div class="ipt">
                <Input type="text" v-model="paramsList.fullName" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('公司位置')}}</p>
              <div class="ipt">
                <Input type="text" v-model="paramsList.position" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" v-if="checkBtnPermission.companyPage" type="primary" @click="changeNum()">{{$t('common.Query')}}</Button>
                <Button
                    class="reset-btn"
                    @click="reset()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear" >
          <span class="title">{{ $t('common.listInformation') }}</span>
          <Button v-if="checkBtnPermission.companyInsert" @click="createfaultCodeShowH">{{$t('common.New')}}</Button>
            <Button @click="getTableColumns(columns)">
                {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
            </Button>
        </div>
        <div class="tableContent">
          <Table  class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList" ellipsis ref="selection"  :data="dataArr">
            <template slot-scope="{ row ,index }" slot="action">
              <span class="operationBtn" @click="createfaultCodeShowH(row)" v-if="checkBtnPermission.companyUpdate"><i class="iconfont zy-common-bianji"></i>{{$t('common.Edit')}}</span>
              <span class="operationBtn" @click="delPrrShowH(row)" v-if="checkBtnPermission.companyDelete"><i class="iconfont zy-common-shanchu"></i>{{$t('common.Delete')}}</span>
            </template>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" />
          <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
      </div>
        <Modal :mask-closable="false"
            v-model="create"
            :title="addtitle"
            class="modal-content-layout"
            :loading="loading">
            <Form class="formList" ref="form" :model="formItem" :rules="ruleValidate" label-position="top" >
                <FormItem :label="$t('公司代码')" prop="code">
                    <Input type="text" v-model="formItem.code" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="$t('spareParts.company')" prop="fullName">
                    <Input type="text" v-model="formItem.fullName" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="$t('公司位置')" prop="position">
                    <Input type="text" v-model="formItem.position" :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default"  @click="create = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary"  :loading="loading" @click="addOk('form')">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false"
            v-model="delFaultCodeShowF"
            :title="$t('common.Delete')"
            class="modal-title-layout"
            :loading="loading">
          <div class="icon red">
            <i class="iconfont zy-common-shanchu"></i>
          </div>
          <p class="title">
            <span>{{$t('common.confirmDelete')}}</span>
          </p>
            <div slot="footer">
                <Button type="default"  @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary"  :loading="loading" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import toggleTableOperation from "@/mixins/toggleTableOperation";
    export default {
        name: "faultHandlingMode",
        mixins:[toggleTableOperation],
        data(){
            return{
                formItem:{

                },
                ruleValidate: {
                    code: [
                        { required: true, message: this.$t('common.inputInfo'), trigger: 'blur', }
                    ],
                    fullName: [
                        { required: true,type:'string', message: this.$t('common.inputInfo'), trigger: 'blur', }
                    ],
                    position: [
                        { required: true,type:'string', message: this.$t('common.inputInfo'), trigger: 'blur', }
                    ],
                },
                addtitle:"",
                loading:false,
                create:false,
                paramsList:{
                },
                pageNum:1,
                pageSize:10,
                total:0,
                columns: [
                    {
                        // title: '公司代码',
                        title: `${this.$t('公司代码')}`,
                        key: 'code',
                        align: 'center',
                        resizable: true
                    },
                    {
                        title: `${this.$t('spareParts.company')}`,
                        key: 'fullName',
                        align: 'center',
                        resizable: true
                    },
                    {
                        // title: '公司位置',
                        title: `${this.$t('公司位置')}`,
                        key: 'position',
                        align: 'center',
                        resizable: true
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        width: 300,
                        align: "center",
                        fixed:"right"
                    }
                ],
                dataArr: [],
                delFaultCodeShowF: false,//是否显示删除弹窗
                pageSizeOption: [10,20,30,40],
                delIds:null,
                selection:[],
                authorizationRole:"",
                checkBtnPermission:{},
            }
        },
        created() {
            this.getTableColumnsWidth(this.columns)
        },
        mounted(){
            this.searchList();
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="companyDelete"){
                    this.checkBtnPermission.companyDelete = true
                }
                if(item.code=="companyInsert"){
                    this.checkBtnPermission.companyInsert = true
                }
                if(item.code=="companyUpdate"){
                    this.checkBtnPermission.companyUpdate = true
                }
                if(item.code=="companyPage"){
                    this.checkBtnPermission.companyPage = true
                }
            }

        },
        methods:{
            reset(){
                this.paramsList = {};
                this.changeNum();
            },
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    name:this.paramsList.name,
                    code:this.paramsList.code,
                    fullName:this.paramsList.fullName,
                    position:this.paramsList.position,
                };
                this.axios({
                    method: 'get',
                    url: '/basic/company/page',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                       this.dataArr = res.data.list
                       this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            createfaultCodeShowH(row){//点击增加或编辑
                this.$refs.form.resetFields();
                if(row.id){
                    this.addtitle = `${this.$t('common.Edit')}`
                    this.formItem = {
                        id:row.id,
                        position:row.position,
                        fullName:row.fullName,
                        code:row.code,
                    }
                }else{
                   this.addtitle = `${this.$t('common.New')}`
                    this.formItem = {}

                }
                this.create = true;
            },
            addOk(name){
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return
                    } else {
                        this.loading = true;
                        this.formItem.name = this.formItem.fullName;
                        if(this.formItem.id){
                            this.axios({
                                method: 'post',
                                url: '/basic/company/update',
                                data: this.formItem
                            }).then(res => {
                                this.loading = false;
                                if(res.code === 200){
                                    this.changeNum();
                                    this.$Message.success(res.msg);
                                    this.create = false;
                                }else{
                                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                                }
                            })
                        }else{
                            this.axios({
                                method: 'post',
                                url: '/basic/company/insert',
                            data: this.formItem
                            }).then(res => {
                                this.loading = false;
                                if(res.code === 200){
                                    this.changeNum();
                                    this.$Message.success(res.msg);
                                    this.create = false;
                                }else{
                                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                                }
                            })
                        }
                    }
                })
            },
            delPrrShowH(row) {
                //点击展示提示删除弹窗
                this.delFaultCodeShowF = true;
                this.delIds = row.id;
            },
            deleteOk(){
                this.loading = true;
                this.axios({
                    method: 'post',
                    url: '/basic/company/delete',
                    params: {
                        id:this.delIds
                    }
                }).then(res => {
                    this.loading = false;
                    if(res.code === 200){
                        this.changeNum();
                        this.$Message.success(res.msg);
                        this.delFaultCodeShowF = false;
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .faultHandlingMode{
        .formList{
            padding: 30px;
            .btn{
                margin-top: 20px;
                text-align: center;
                width: 100%;
                height: 40px;
            }
            .inputBorder{
                border: 1px solid #dcdee2;
                border-radius:4px;
            }
        }
    }
</style>
